<template>
	<view class="center">
		<view class="logo" @click="goLogin">
			<view class="logo-title">
				<text class="user-name">Hi，{{login ? userInfo.username : '您未登录'}}</text>
			</view>
		</view>
		<button class="sign__out__button" @click="signOut" v-if="login">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: false,
				userInfo: {},
			}
		},
		onShow() {
			let token = uni.getStorageSync('token');
			if (token) {
				this.login = true;
			}
			this.getUserDetail()
		},
		methods: {
			getUserDetail() {
				this.$set(this.userInfo,'username',uni.getStorageSync('username'));
			},
			goLogin() {
				if (!this.login) {
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}
			},
			signOut() {
				uni.removeStorageSync('token');
				uni.removeStorageSync("userInfo");
				uni.navigateTo({
					url: '/pages/login/index'
				});
			}
		}
	}
</script>

<style>
	.center {
		flex-direction: column;
	}

	.logo {
		height: 300rpx;
		padding: 80rpx;
		background-color: #5290ff;
		display: flex;
	}
	.user-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
		line-height: 75px;
	}
	.sign__out__button {
		position: fixed;
		bottom: 100rpx;
		right: 50rpx;
		left: 50rpx;
		width: 650rpx;
		height: 80rpx;
		color: #fff;
		background-color: red;
		line-height: 80rpx;
	}

</style>